<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<style type="text/css">
			.outer-box {
				height: 200px !important;
				border: solid 1px #0000ff;
			}
			.outer-box2 {
				height: 30px;
				line-height: 30px;
				border: solid 1px #FF0000;
			}

			.inner-box {
				overflow: auto;
			}

			.test {
				width: 100%;
				height: 30px;
				color: #FF0000;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
			}

			.test2 {
				color: #00ff00;
			}
			
			.mui-scroll .mui-scroll-wrapper,
			.mui-scroll .mui-scroll {
				position: relative;
			}
			
			.mui-pull-bottom-tips {
				margin-bottom: 15px;
				text-align: center;
				color: #999999;
			}
			.brf {
				position: fixed;
				top: 0;
				left: 0;
				width: 200px;
				background: rgba(100, 100, 100, .2);
				color: red;
				z-index: 999;
				padding: 6px 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试scroll</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper outer">
			<div class="mui-scroll">
				<div id="outerTopBox" class="outer-box test">3221321</div>
				<div class="mui-scroll-wrapper inner">
					<div id="dataBox" class="mui-scroll" style="border: solid 1px green;">
						<div class="list-box">
							<div class="test test2">000000</div>
							<div class="test test2">1111111</div>
							<div class="test test2">22222222</div>
							<div class="test test2">3221321111</div>
							<div class="test test2">32213211111</div>
							<div class="test test2">322132111111</div>
							<div class="test test2">3221321111111</div>
							<div class="test test2">32213211111111</div>
							<div class="test test2">322132111111111</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">32213211</div>
							<div class="test test2">322132111</div>
							<div class="test test2">3221321111</div>
							<div class="test test2">32213211111</div>
							<div class="test test2">322132111111</div>
							<div class="test test2">3221321111111</div>
							<div class="test test2">32213211111111</div>
							<div class="test test2">322132111111111</div>
							<div class="test test2">3221321111111111</div>
							<div class="test test2">32213211111111111</div>
							<div class="test test2">322132111111111111</div>
							<div class="test test2">3221321111111111111</div>
							<div class="test test2">32213211111111111111</div>
							<div class="test test2">322132111111111111111</div>
							<div class="test test2">3221321111111111111111</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="brf">
			<div id="outerY"></div>
			<div id="innerY"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/nest.scroll.pullToRefresh.js"></script>
	
	<script type="text/javascript">
		mui.init();
		
		// 初始化内外部滚动 和 上拉加载
		initScrollAndPullToRefresh();
		
		// 上拉加载回调
		function pullfreshCallback() {
			alert(1);
			setTimeout(function(){
				alert(2);
				for (var i = 0; i < 10; i++) {
					var div = document.createElement('div');
					div.innerHTML = '第 ' + num + '-' + i + '个div!!!';
					document.querySelector('.list-box').appendChild(div);
				}
				num++;
				console.log('num -> ' + num)
				mui('.inner>.mui-scroll').pullToRefresh().endPullUpToRefresh(num > 2);
			}, 100);
		}
	</script>
</html>
